<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>-->
    <!--<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>-->
    <!--<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>-->
    <script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
</head>
<body>
    <div id="content" ></div>
    <!--<script type="text/babel" src="scripts/index.js"></script>-->
    <script type="text/babel">

//        class marketData extends React.Component {
//            getAjax:function(){
//                $.ajax({});
//            },
//            getInitialState:function(){
//                return {data:[]};
//            },
//            render:(){
//                return ;
//            }
//
//        }


//        var Comment = React.createClass({
//
//            render:function () {
//                return (
//                        <tr>
//                            <td className="marketId">
//                            {this.props.marketId}
//                            </td>
//                            <td className="keyword">
//                                {this.props.keyword}
//                            </td>
//                            <td className="marketName">
//                                {this.props.marketName}
//                            </td>
//                            <td className="keywordCount">
//                                {this.props.keywordCount}
//                            </td>
//                        </tr>
//                );
//            }
//        })


//        var CommentList = React.createClass({
//            render() {
//                let marketDataNode = this.props.data.map(marketData => {
//
//                    return (
//                            <Comment key={marketData.market_id} marketId={marketData.market_id} keyword={marketData.keyword} marketName={marketData.market_name} keywordCount={marketData.keyword_count}></Comment>
//                    );
//                });
//                return (
//                        <div className="commentList">
//                            <table className="table table-bordered">
//                                <thead>
//                                    <tr>
//                                        <th>ID</th>
//                                        <th>关键词</th>
//                                        <th>市场</th>
//                                        <th>刷机次数</th>
//                                    </tr>
//                                    {marketDataNode}
//                                </thead>
//                            </table>
//                        </div>
//                );
//            }
//        });

//        var CommentForm = React.createClass({
//           render:function () {
//               return (
//                       <div className="commentForm">
//
//                       </div>
//               )
//           }
//        });
//
//        class CommentBox extends React.Component{
//            constructor(props) {
//                super(props);
//                this.state = {data:[]};
//            }
//            render() {
//                return (
//                    <div className="commentBox">
//                        <CommentList data={marketData}/>
//                        <CommentForm/>
//                    </div>
//                );
//            }
//        }

//        var CommentBox = React.createClass({
//            constructor(props) {
//                super(props);
//                this.state = {data:[]};
//            },
//            render:function () {
//                return (
//                        <div className="commentBox">
                            <!--<CommentList data={marketData}/>-->
//                            <CommentForm/>
//                        </div>
//                );
//            }
//        });

//        ReactDOM.render(
//                <CommentBox/>,
//                document.getElementById('content')
//        );
    </script>
</body>
</html>